<template>
  <div class="layout">
    <div class="userhead" @click="gonext('root:app/user/myQR/myQR.js')">
      <div class="userTop">
        <div class="userImg">
          <image class="avator" :src="userData.headimgurl" />
        </div>
        <div class="userInfo" v-if="userId">
          <text class="username" v-if="userData.nickname">{{userData.nickname}}</text>
          <text class="userPhone">{{userData.phone_number}}</text>
        </div>
        <div class="userInfo" v-if="!userId">
          <text class="loginTxt">Please login / register your account</text>
          <text class="loginBtn">Click to Login</text>
        </div>

        <text class="iconfont righticon">&#xe6a1;</text>
      </div>
    </div>
    <list class="scroller" :show-scrollbar="false">
      <refresh class="refresh" @refresh="onrefresh" :display="refreshing ? 'show' : 'hide'">
        <loading-indicator class="indicators"></loading-indicator>
      </refresh>
      <cell></cell>
      <cell>
        <div class="freshContent">
          <x-cell
            title="My orders"
            :hasArrow="true"
            class="list-margin"
            @cellClick="setOrderType(0); gonext('root:app/user/order_list/order_list.js',{type:0})"
          >
            <text slot="value" style="color:#999;font-size:28px;">View my orders</text>
          </x-cell>
          <div class="orderBox">
            <div
              class="sectionItem"
              @click="setOrderType(1);gonext('root:app/user/order_list/order_list.js',{type:1})"
            >
              <image class="itemIcon" src="root:img/iconM1.png" />
              <text class="itemTitle">Unpaid</text>
            </div>
            <div
              class="sectionItem"
              @click="setOrderType(2);gonext('root:app/user/order_list/order_list.js',{type:2})"
            >
              <image class="itemIcon" src="root:img/iconM2.png" />
              <text class="itemTitle">Unshipped</text>
            </div>
            <div
              class="sectionItem"
              @click="setOrderType(3);gonext('root:app/user/order_list/order_list.js',{type:3})"
            >
              <image class="itemIcon" src="root:img/iconM3.png" />
              <text class="itemTitle">Shipped</text>
            </div>
            <div
              class="sectionItem"
              @click="setOrderType(4);gonext('root:app/user/order_list/afterSale.js')"
            >
              <image class="itemIcon" src="root:img/iconM4.png" />
              <text class="itemTitle">After-sales</text>
            </div>
          </div>
          <!-- <x-cell
            title="Invite friends"
            :hasArrow="true"
            @cellClick="gonext('root:app/invite/index.js')"
          >
            <div slot="label" class="list-icon">
              <image class="labelImg" src="root:img/iconML0.png" />
            </div>
          </x-cell>
          <x-cell
            title="Balance"
            :hasArrow="true"
            @cellClick="gonext('root:app/user/balance/balance.js')"
          >
            <div slot="label" class="list-icon">
              <image class="labelImg" src="root:img/iconML1.png" />
            </div>
          </x-cell>-->
          <x-cell
            title="My selling"
            :hasArrow="true"
            @cellClick="gonext('root:app/selling/sellList.js')"
          >
            <div slot="label" class="list-icon">
              <image class="labelImg" src="root:img/iconML2.png" />
            </div>
          </x-cell>
          <!-- <x-cell title="Sold" :hasArrow="true" @cellClick="gonext('root:app/selling/sold.js')">
            <div slot="label" class="list-icon">
              <image class="labelImg" src="root:img/iconML3.png" />
            </div>
          </x-cell>-->
          <x-cell
            title="Collection"
            :hasArrow="true"
            @cellClick="gonext('root:app/user/keep/keep.js')"
          >
            <div slot="label" class="list-icon">
              <image class="labelImg" src="root:img/iconML4.png" />
            </div>
          </x-cell>
          <x-cell
            title="Vouchers"
            :hasArrow="true"
            @cellClick="gonext('root:app/user/coupon/coupon.js')"
          >
            <div slot="label" class="list-icon">
              <image class="labelImg" src="root:img/iconML5.png" />
            </div>
          </x-cell>

          <x-cell
            title="Help centre"
            :hasArrow="true"
            @cellClick="gonext('root:app/user/help/help.js')"
          >
            <div slot="label" class="list-icon">
              <image class="labelImg" src="root:img/iconML6.png" />
            </div>
          </x-cell>
          <x-cell
            title="Settings"
            :hasArrow="true"
            @cellClick="gonext('root:app/user/setting/setting.js')"
          >
            <div slot="label" class="list-icon">
              <image class="labelImg" src="root:img/iconML7.png" />
            </div>
          </x-cell>
          <x-cell
            title="Manage delivery time"
            :hasArrow="true"
            @cellClick="gonext('root:app/user/appointment/index.js')"
          >
            <div slot="label" class="list-icon">
              <image class="labelImg" src="root:img/iconML8.png" />
            </div>
          </x-cell>
          <x-cell
            title="Customer service"
            :hasArrow="true"
            @cellClick="gonext('root:app/msg/msg.js')"
          >
            <div slot="label" class="list-icon">
              <image class="labelImg" src="root:img/iconML9.png" />
            </div>
          </x-cell>

          <div style="margin-bottom:40px"></div>
        </div>
      </cell>
    </list>
    <div class="maskClack" @click="e=>e.stopPropagation()" v-if="isLoading">
      <floading class="indicator" color="#303030"></floading>
    </div>
  </div>
</template>
<script>
import asCore from "../../mixin/core";
import { get_users_info, get_address_list } from "../../mixin/ajax";
const updateImg = new BroadcastChannel("updateImg");

export default {
  props: {
    userId: {
      default: ""
    }
  },
  components: {
    "x-cell": require("../../component/cell.vue")
  },
  data() {
    return {
      users_id: "",
      refreshing: false,
      userData: {
        headimgurl: "root:img/default.png",
        user_name: "",
        phone_number: ""
      }
    };
  },
  watch: {
    userId(val, oldVal) {
      if (!val) {
        this.userData = { headimgurl: "root:img/default.png" };
      }
    }
  },
  created() {
    updateImg.onmessage = () => {
      this.loadData(this.users_id);
    }; 
    // this.loadData();
  },
  methods: {
    setOrderType(type) {
      var pref = weex.requireModule("storage");
      pref.setItem("orderType", type);
    },
    loadData(users_id) {
      this.users_id = users_id;
      get_users_info({ users_id: users_id }, (res, flag) => {
        if (flag) {
          if (res.code == 200) {
            this.userData = Object.assign({}, this.userData, res.data);
            asCore.setContext(res.data);
          }
        }
      });
      get_address_list(
        { users_id: users_id, page: 1, page_num: 10 },
        (res, flag) => {
          var pref = weex.requireModule("storage");
          pref.removeItem("defaultAddress");
          if (flag) {
            if (res.code == 200) {
              if (res.data.list.length > 0) {
                let address = res.data.list[0];
                pref.setItem("defaultAddress", JSON.stringify(address));
              }
            }
          }
        }
      );
    },
    /* 判断是否登录 */
    isLogin: function() {
      var s = this;
      asCore.getBsessionid(bid => {
        if (bid) {
          asCore.getContext(context => {
            this.userData = context;
          });
        }
      });
    },

    onrefresh(event) {
      var that = this;
      that.refreshing = true;

      that.loadData(that.userId);
      setTimeout(() => {
        that.refreshing = false;
      }, 500);
    },
    gonext(url, parmar) {
      if (!this.userId) {
        this.push("root:app/login/login.js");
      } else {
        this.push(url, parmar);
      }
    }
  }
};
</script>
<style scoped>
.iconfont {
  font-family: iconfont;
}
.headTop {
  background-color: #303030;
  height: 100px;
  width: 750px;
}
.layout {
  flex: 1;
}
.freshContent {
  background-color: #f2f2f2;
}

.scroller {
  flex: 1;

  background-color: #f2f2f2;
}

.userhead {
  width: 750px;
  padding: 140px 30px 30px;
  background-color: #303030;
  justify-content: center;
}

.userTop {
  /* border-bottom-color: #f2f2f2;
  border-bottom-width: 2px;
  border-bottom-style: dashed; */
  flex-direction: row;
  align-items: center;
  padding-top: 10px;
  padding-bottom: 20px;
}

.userImg {
  width: 100px;
  height: 100px;
  margin-left: 40px;
  margin-right: 20px;
}

.avator {
  width: 100px;
  height: 100px;
  border-radius: 50px;
  background-color: #f2f2f2;
}

.userInfo {
  flex: 1;
}

.username {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #ffffff;
}
.loginTxt {
  font-size: 24px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  line-height: 33px;
}
.loginBtn {
  text-align: center;
  width: 174px;
  height: 48px;
  background-color: rgba(187, 138, 54, 1);
  border-radius: 24px;
  font-size: 20px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  line-height: 48px;
  margin-top: 15px;
}

.userPhone {
  font-size: 28px;
  color: #ffffff;
}

.refresh {
  width: 750px;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  align-items: center;
  background-color: #303030;
}
.indicators {
  height: 80px;
  width: 80px;
  text-align: center;
  color: #fff;
}

.indicator {
  margin-top: 30px;
  margin-bottom: 20px;
  height: 40px;
  width: 40px;
  text-align: center;
}

.righticon {
  font-size: 40px;
  color: #ffffff;
}

.orderBox {
  flex-direction: row;
  padding: 20px 0;
  background-color: #fff;
  margin-bottom: 20px;
}

.sectionItem {
  flex: 1;
  justify-content: center;
  align-items: center;
}

.itemNum {
  margin-bottom: 10px;
  color: #333;
}

.itemTitle {
  color: #666;
  text-align: center;
  font-size: 22px;
}

.itemIcon {
  text-align: center;
  width: 68px;
  height: 68px;
  font-size: 40px;
}

.list-icon {
  height: 65px;
  width: 65px;
  margin-right: 20px;
  align-items: center;
  justify-content: center;
}
.labelImg {
  width: 60px;
  height: 60px;
}

.list-margin {
  margin-top: 30px;
}
</style>
